【静态页面架构】HTML之布局

头像
佐珥玎
    阅读 10 分钟
    3

    一.布局；

    1.水平居中

    第一种居中方式；

    以text-align属性设置父级元素和设置行内块级元素

    <style>
        body{
            text-align: center;
        }
        #qq{
            width: 200px;
            height: 200px;
            background-color: blue;
            text-align: center
            <!--将text-align属性设置父级元素-->
            <!--设置文本内容水平方向居中-->
        }
        #q1,#q2{
            width: 200px;
            height: 200px;
            background-color: red;
            display: inline-block;
            <!--设置行内块级元素-->
        }
        #q2{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="qq">
    <div id="q1">爱新觉罗</div>
</div>
<div id="q2">呼延觉罗</div>
</body>

    第二种居中方式；

    以设置块级元素和外边距特性来设置

     <style>
        #qq{
            width: 100%;
            height: 200px;
            background-color: white;
        }
        #q1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*margin外边距实现水平居中
              dispaky属性值只能是block和table
             */
            display: block;
            /*设置块级元素*/
            margin:0 auto;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="qq">
    <div id="q1">爱新觉罗</div>
</div>
<div id="q2">爱新觉罗</div>
</body>

    第三种居中方式；

    以设置绝对定位和trannsform属性值来实现居中

    <style>
        #q1{
            width: 100%;
            height: 200px;
            background-color: white;
            position: relative;
            /*设置父级元素水平居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            /*设置绝对定位
              设置父级元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            /*设置绝对定位*/
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div id="q1">
    <div id="q2">爱新觉罗</div>
    <!--实现水平居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现水平居中-->
</body>

    第四种居中方式；

    以设置相对定位和trannsform属性值(translateX)

     <style>
        #q1{
            width: 100%;
            height: 200px;
            background-color: white;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            /*设置相对定位
              设置父级元素水平居中*/
            left: 50%;
            transform: translateX(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            /*设置相对定位*/
            left: 50%;
            transform: translateX(-50%);
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">爱新觉罗</div>
    <!--实现水平居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现水平居中-->
</body>

    2.垂直居中；

    第一种居中方式；

    以设置父级元素为单元格，垂直方向居中

    <style>
        body{
            height: 880px;
            display: table-cell;
            vertical-align: middle;
        }
        #q1{
            width: 200px;
            height: 660px;
            background-color: white;
            display: table-cell;
            /*相对于表格的单元格(<td>元素)
            单元格的内容可以设置为水平和垂直中对齐*/
            vertical-align: middle;
            /*垂直方向居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">爱新觉罗</div>
    <!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>

    第二种居中方式；

    以设置子级相对定位和transform属性值(translateY)

    <style>
        #q1{
            width: 200px;
            height: 660px;
            background-color: lightgrey;
            position: relative;
            /*子级元素垂直居中*/
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            /*设置绝对定位
              相对于父级*/
            top: 50%;
            transform: translateY(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">爱新觉罗</div>
    <!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>

    第三种居中方式；

    以设置子级元素相对定位和transform属性值(translateY)

     <style>
        #q1{
            width: 200px;
            height: 660px;
            background-color: lightgrey;
        }
        #q2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            /*设置相对定位*/
            top: 50%;
            transform: translateY(-50%);
        }
        #q3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div id="q1">
    <div id="q2">爱新觉罗</div>
    <!--实现垂直居中-->
</div>
<div id="q3">爱新觉罗</div>
<!--实现垂直居中-->
</body>

    3.居中布局；

    第一种居中布局；

    以设置父级相对定位和子级绝对定位；transform属性值translate;

    <style>
        #qian{
            width: 800px;
            height: 600px;
            background-color: lightgrey;
            position: relative;
            /*设置相对定位*/
        }
        #ying {
            width: 200px;
            height: 200px;
            background-color: red;

            position: absolute;
            /*设置绝对定位*/
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
            /*实现块元素居中*/;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: blue;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="qian">
    <div id="ying"></div>
</div>
<div></div>
</body>

    第二种居中布局；

    以设置父级单元格和外边距特性

    <style>
        #qian{
            width: 800px;
            height: 600px;
            background-color: lightgrey;
            display: table-cell;
            /*相对于表格的单元格(<td>元素)
              单元格的内容可以设置为水平和垂直中对齐
             */
            vertical-align: middle;
            /*父级元素居中*/
        }
        #ying {
            width: 200px;
            height: 200px;
            background-color: blue;

            display: table;
            /*块级表格的(table)*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="qian">
    <div id="ying"></div>
</div>
</body>

    4.两列布局；

    第一种两列布局；

    设置左浮动和外左边距

    <style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定宽 */
            width: 300px;
            background-color: lightcoral;
            float: left;
        }
        .you {
            background-color: gray;
            margin-left: 300px;
        }
        .zy {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;

            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<div class="you">
    <div class="zy"></div>
</div>
</body>

    第二种两列布局；

    以设置左浮动和开启BFC模式来设置

     <style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定宽 */
            width: 300px;
            background-color: blue;
            float: left;/*设置为左浮动*/
            /*脱离文档流*/

        }
        .you{
            background-color: gray;
            /* 开启BFC模式*/
            overflow: hidden;
        }

        .zy {
            width: 100%;
            height: 200px;
            background-color: red;
            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<div class="rc">
    <div class="you">
        <div class="zy"></div>
    </div>
</div>
</body>

    第三种两列布局；

    以右浮动和外左边距来设置

    <style>
        .zuo, .you {
            height: 300px;
        }
        .zuo {
            /* 定宽 */
            width: 300px;
            background-color: lightcoral;

            float: left;
            <!--设置左浮动-->
            /* 开启定位 - 定位的层级结构高于浮动 */
            position: relative;
        }
        .rc {
            background-color: lightgray;
            /*
                脱离文档流 - 宽度等于所有后代元素宽度之和
                * 右边列必须是只适应 - 不能设置定宽
                * 不设置宽度的话，默认为 0
                解决 - width: 100%
             */
            width: 100%;/* 为页面宽度的100% */
            float: right;
            /*
                margin-left - 控制当前元素的位置
             */
            margin-left: -300px;
        }
        .you {
            background-color: gray;
            margin-left: 300px;
        }
        .zy {
            width: 100%;
            height: 300px;
            background-color: yellowgreen;

            clear: both;
        }

    </style>
</head>
<body>
<div class="zuo">这是作为左边的定宽</div>
<!-- 为作为右边自适应列，添加父级容器元素 -->
<div class="rc">
    <div class="you">
        <div class="zy"></div>
    </div>
</div>
</body>

    第四种两列布局；

    以设置父级为display属性值(table)

    <style>
        /* 1.将左右两列元素的父级设置display值为table */
        .pt {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .zuo, .you {
            height: 300px;
            /* 2.将左右两列元素设置display值为table-cell */
            display: table-cell;
        }
        .zuo {
            /* 定宽 */
            width: 300px;
            background-color: red;
        }
        .you {
            background-color: gray;
               /*
           由于设置display值为table-cell，默认的宽度为所有后代元素宽度之和
                  这一列作为自适应的一列
                 不能设置当前列的宽度为定宽
                */
            /*width: 100%;*/
        }

    </style>
</head>
<body>
<div class="pt">
    <div class="zuo">这是作为左边的定宽</div>
    <div class="you"></div>
</div>
</body>
    html
    佐珥玎
    41 声望8 粉丝
    « 上一篇
    【静态页面架构】CSS之定位
    下一篇 »
    【JavaScript】DOM之Node对象

    引用和评论

    推荐阅读
    头像
    【Ajax】之jQuery中的Ajax

    佐珥玎阅读 1.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.8k

    头像
    html如何实现跳转到锚点

    大发明家赞 2阅读 4.2k

    头像
    这些年

    注销赞 2阅读 4k

    头像
    一个用JavaScript生成思维导图(mindmap)的github repo

    注销赞 1阅读 6.2k

    0 条评论
    得票最新